 #include ("/_includes/_layout.html")
#@layout("拼团商品","wxmall,点步科技","Wxmall社区","wxmall") 
<link rel="stylesheet" href="#(webctx)/resources/css/pintuanMoblie.css"/>
<style>
._2NsUx {
    display: inline-block;
    margin-left: 24px;
    margin-left: 1.5rem;
    width: 80px;
    width: 5rem;
    height: 36px;
    height: 2.25rem;
    margin-right: 12px;
    margin-right: .75rem;
}
._3wipT {
    background: url(#(webctx)/resources/images/pintuan.jpg);
    background-size: cover;
}
</style>
#define content()
<div class="weui-panel_access" style="margin-top:0px">
	#if(multiGroup??)
		<input type="hidden" id="descValue" value="#(multiGroup.share_intro??)"/>
	#end
	
	<img style="width: 100%;display: block;" src="#(multiGroup.activity_image??)" />
	<div class="_3wipT">
		<div class="_2NsUx">
			<img style="width: 100%;display: block;;" src="#(webctx)/resources/images/pintuan-font.png" />
		</div>
		火热拼团
		<div class="_107vS">
			<div class="_2qjW2" style="padding-bottom: 3px;">仅剩</div>
			<div class="_1uxdA">7天
				<span class="_2Tgu3">07</span>
				<span class="xqMBA">:</span>
				<span class="_2Tgu3">17</span>
				<span class="xqMBA">:</span>
				<span class="_2Tgu3">39</span>
			</div>
		</div>
		</div>
		
	
	<div class="_2E6RZ">
		<div class="_2G9WG">
			<div class="_3kkm8" >
				 <div style="width:40px; height:40px; margin-right: 10px; float: left;">
	  				<img style="width:100%; height:100%" src="http://wx.qlogo.cn/mmopen/A7sq8BD8oex6iaE7jrtsMf9MQy2CuDJILZhj7ibic466l44ZhoEghBbCpazq6ibA79RQsF90e5HqJxvuG8Rtibnlwv7cH1q2FfCIj/0"/>
  				</div>
			</div>
			<div class=" _30JtJ"><a href="#(webctx)/">进入店铺&nbsp;></a></div>
		</div>
	</div>	
	
	<div class="_2E6RZ">
		<div class="_2G9WG">
			<div class="_3kkm8">拼团说明</div>
			<div class="_30JtJ">
				<div class="_32flD" id="more">查看更多&nbsp;></div>
			</div>
		</div>	
	</div>
	
	<div class="oNCCp">	
		<div class="Ob98F">
			<div class="_2DocY undefined">#(multiGroup.activity_explain??)</div>
		</div>	
	</div>	
	
	<div id="list"></div>
	<div class="weui-loadmore">
	    <i class="weui-loading"></i>
	    <span class="weui-loadmore_tips">正在加载</span>
	</div>
#end
</div>
<div class="menu">
	<div style="border-bottom: 2px solid red;"><a href="#(webctx)/multigroup?id=#(multiGroup.id??)" >拼团商品</a></div>
	<div style="padding: 10px 0px"><a href="#(webctx)/multigroup/orders?multigroupId=#(multiGroup.id??)">我的拼团</a></div>
</div>
#define script()
<script type="text/html" id="product_item_tpl">
{{each data as item i}}
<div class="product-item">
  <div style="width:90px; height:90px; margin-right: 10px; float: left;">
	  <img style="width:100%; height:100%" src="{{item.image}}"/>
  </div>
  <div style="color: #999;font-size: 14px;">{{item.name}}</div>
  <div style="color: #999;font-size: 14px;">{{item.specification_value}}</div>
  <div style="color: #999;font-size: 12px; margin-top: 10px"> 需 {{data.offer_num}} 参团</div>
  <div style="color: red;font-size: 12px;overflow:hidden;line-height: 38px;">
	  <div style="float: left;">拼团价：￥<span style="font-size: 14px;">{{item.collage_price}}</span></div>
	  <div style="float: right; margin-top: 10px; ">
			<a href="#(webctx)/product/detail?id={{item.id}}" style="line-height: 2;border:1px solid red;color:red" class="weui-btn weui-btn_mini">立即拼团</a>
	  </div>
  </div>
</div>
{{/each}} 
</script>
<script type="text/html" id="product_none_tpl">
<div class="assisfree-order-none">
	<div>暂无拼团商品</div>
</div>
</script>
<script type="text/html" id="product_end_tpl">
<div class="assisfree-order-none">
	<div>该拼团活动已结束</div>
</div>
</script>
<script type="text/javascript">
var flag = false;
Date.prototype.format = function(fmt)   { //author: meizz   
  var o = {   
    "M+" : this.getMonth()+1,                 //月份   
    "d+" : this.getDate(),                    //日   
    "h+" : this.getHours(),                   //小时   
    "m+" : this.getMinutes(),                 //分   
    "s+" : this.getSeconds(),                 //秒   
    "q+" : Math.floor((this.getMonth()+3)/3), //季度   
    "S"  : this.getMilliseconds()             //毫秒   
  };   
  if(/(y+)/.test(fmt))   
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
  for(var k in o)   
    if(new RegExp("("+ k +")").test(fmt))   
  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
  return fmt;   
}

#if(multiGroup??)
function countTime() {  
    //获取当前时间  
    var date = new Date().format("yyyy/MM/dd hh:mm:ss");
    var now = new Date(date).getTime();  
    //设置截止时间  
    var str="#(multiGroup.end_date??)";
    var endDate = new Date(str).format("yyyy/MM/dd hh:mm:ss");
    var end = new Date(endDate).getTime();  
    
    //时间差  
    var leftTime = end-now; 
    //定义变量 d,h,m,s保存倒计时的时间  
    var d,h,m,s;  
    if (leftTime>=0) {  
        d = Math.floor(leftTime/1000/60/60/24);  
        h = Math.floor(leftTime/1000/60/60%24);  
        m = Math.floor(leftTime/1000/60%60);  
        s = Math.floor(leftTime/1000%60);                     
    }else{
        var text = 	"<div class='_2qjW2'>该拼团活动已结束</div>";
		$("._107vS").html(text);
        flag = true;
		return;
    }
    //将倒计时赋值到div中
    var text = 	"<div class='_2qjW2'>仅剩</div>"
					+"<div class='_1uxdA'>"+d+"天"
					+"<span class='_2Tgu3'>"+h+"</span>"
					+"<span class='xqMBA'>:</span>"
					+"<span class='_2Tgu3'>"+m+"</span>"
					+"<span class='xqMBA'>:</span>"
					+"<span class='_2Tgu3'>"+s+"</span>"
					+"</div>"
					+"</div>"
    $("._107vS").html(text) 
    //递归每秒调用countTime方法，显示动态时间效果  
    setTimeout(countTime,1000);  
}
#end
var page = 1;
var params = {};
params.page = page;
$(function(){
 	$("#more").click(function(){
		layer.open({
		 	title:"活动说明",
		    type: 2,
		    area:['345px', '315px'],
		    shade: 0.1,
		    content:  ['#(webctx)/multigroup/explain?id=#(multiGroup.id??)'],
		    scrollbar: false ,
		});
	}) 
	
	countTime();
	submit(params);
	var loading = false;  //状态标记
	//滚动加载
	$(document.body).infinite().on("infinite",function(){
		if(loading) return;
		loading = true;
		page ++;
		params.page = page;
		submit(params);
	});
	function submit(arr){
		$.ajax({
			type: "post",
			url: "#(webctx)/multigroup/productList?id=#(multiGroup.id??)",
			data: arr,
			async: true,
			success: function(data){
				if(data.code != 200){
					$.toast("加载数据失败，请重新拉取");
					return;
				}
				if(flag){
					$(document.body).destroyInfinite();
			        $('.weui-loadmore').remove();
			        $("#list").empty();
			        $("#list").append($("#product_end_tpl").html())
			        return;
				}
				if(data.data.length<=0){
					$(document.body).destroyInfinite();
	                $('.weui-loadmore').remove();
	                $(".weui-panel_access").append($("#product_none_tpl").html())
				}else{
					data.data.offer_num = "#(multiGroup.offer_num??)";
					$("#list").append(template('product_item_tpl', data));
					loading = false;
					if(data.data.length<10){
						$(document.body).destroyInfinite();
		                $('.weui-loadmore').remove();
					}
				}
			},
			error: function(){
				alert("网络异常,请联系管理员!");
			}
		});
	}
	
	#if(multiGroup??)
		var descValue = $("#descValue").val().replace(/[\r\n]/g,"");
		wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
			//自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0） #(session._buyerUser.open_id)
			wx.updateAppMessageShareData({ 
		        title: '#(multiGroup.share_title)', 
		        desc: descValue, 
		        link: 'http://#(appId??).dbumama.com/multigroup?id=#(multiGroup.id)', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		        imgUrl: '#(multiGroup.share_image)', // 分享图标
		        success: function () {
		        	// 设置成功
		        }
			})
			//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
			wx.updateTimelineShareData({ 
		        title: '#(multiGroup.share_title)', // 分享标题
		        link:  'http://#(appId??).dbumama.com/multigroup?id=#(multiGroup.id)',// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		        imgUrl: '#(multiGroup.share_image)', // 分享图标
		        success: function () {
		          // 设置成功
		        }
			});
		});
	#end
});
</script>
#end
